import CANNON from "cannon";
import {
  BoxGeometry,
  Mesh,
  MeshBasicMaterial,
  PerspectiveCamera,
  PointLight,
  Scene,
  WebGLRenderer,
} from "three";
// import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer";
export default class GameCanvas {
  public webGLRenderer = new WebGLRenderer();

  public css2DRenderer = new CSS2DRenderer();

  public scene = new Scene();

  public camera = new PerspectiveCamera(75, 1280 / 720, 0.1, 1000);

  render() {
    this.webGLRenderer.render(this.scene, this.camera);
  }

  constructor(config: {
    size: {
      width: number;
      height: number;
    };
  }) {
    const { size } = config;

    const { width, height } = size;

    this.camera.aspect = width / height;

    this.webGLRenderer.setSize(width, height);
    this.css2DRenderer.setSize(width, height);
    this.css2DRenderer.domElement.style.position = "absolute";
    this.css2DRenderer.domElement.style.left = "0px";
    this.css2DRenderer.domElement.style.top = "0px";
    this.css2DRenderer.domElement.style.zIndex = "1";

    this.test();

    setInterval(() => {
      this.render();
    }, 16.7);
  }

  test() {
    const light = new PointLight(0xff0000, 1, 100);
    light.position.set(0, 2, 0);
    this.scene.add(light);

    const getCube = () => {
      const geometry = new BoxGeometry(1, 1, 1);
      const material = new MeshBasicMaterial({ color: "white" });
      // test
      const cube = new Mesh(geometry, material);
      cube.position.set(0, 0, -5);
      cube.rotation.set(0, 0.2, 0.2);
      return cube;
    };
    const cube = getCube();

    this.scene.add(cube);

    const cannonWorld = new CANNON.World();
    cannonWorld.gravity.set(0, 9.8, 0);
    cannonWorld.step(1 / 60);
  }
}
